<template>
  <div>
    <ul class="active" v-for="item in treedata"  @click.stop.prevent="test(item)">
      {{item.name}}
      <span  v-show="isOpenFolder">[{{open ? '-':'+'}}]</span>
      <li  v-show="open">
        <treeitem  :treedata="item.sub"  ></treeitem>
      </li>
    </ul>
  </div>

</template>

<script>
export default {
name: "treeitem",
  props: {
    treedata: {
      type: Array,
     default(){
        return []
     }
    },
  },
  data(){
  return{
    open:false,
    subArr:[]
  }
  },
  created() {
    this.update()
  },
  methods: {
    update() {
      for (let item of this.treedata) {
        this.subArr =  item.sub
      }
    },
    change() {
      this.open = !this.open
    },
    test(item) {
      this.change();
      this.update(item.name);
    }
  },
  computed: {
    isOpenFolder() {
      return this.subArr && this.subArr.length > 0;
    }
  }


}
</script>

<style scoped>
       .active{
         position: relative;
         margin-top:20px;
         cursor: default;
            background: #fff;
            color: #606266;
         font-size: 20px;
       }
</style>
